#page-container {
    overflow: hidden;
}

#map {
  min-height: 400px;
}

#featured #map {
  padding-left: 0;
}

#map:last-child:after  {
  content: '';
  position: absolute;
  -webkit-box-shadow: inset -1px 1px 5px 3px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: inset -1px 1px 5px 3px rgba(0, 0, 0, 0.19);
  box-shadow: inset -1px 1px 5px 3px rgba(0, 0, 0, 0.19);
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 1000;
}

.fire-department-card .ct-main-text {
  min-height: 75px;
  max-height: 75px;
  overflow: hidden;
}

// Homepage - Header
.header-image {
  height: 800px;
}

// Utility & Helpers
.overflow-y-scroll {
    overflow-y: scroll;
}

// select2-fix
.ui-select-choices {
  z-index: 10001;
}



// Navigation and Utility Nav
// ------------------------------------

.navbar {
    box-shadow: none;
    font-weight: 300;
    min-height: 88px;

    .navbar-nav li a {
        font-size: 15px;
    }
    
    sup {
      color: @brand-primary;
    }
}

.sub-navbar {
  sup {
    color: @brand-primary;
  }
}

.ct-topBar {
    background: transparent;
    box-shadow:  none;
    font-weight: 100;

    &.navbar-scroll-top {
      position: relative; // overrides the utility menu behavior
    }

    & .ct-input--search {
     line-height: 30px;
     width: 225px;
    }

    & .search-wrapper {
      position: relative;
      overflow: hidden;
      width: 250px;
      height: 30px;

      &:hover #slide {
        transition: 1s;
        right: 0;
      }
    }

    #slide {
      position: absolute;
      right: -180px;
      width: 250px;
      transition: 1s;
    }

    a {
      color: lighten(@gray-base, 65%);
      font-weight: 400;
    }

    form {
      color: lighten(@gray-base, 65%);
      font-weight: 400;
      height: 30px;
    }

    input[type="text"]::-webkit-input-placeholder {
       color: lighten(@gray-base, 65%);
       font-weight: 400;
    }

    input[type="text"]:-moz-placeholder {
       color: lighten(@gray-base, 65%);
       font-weight: 400;
    }

    input[type="text"]::-moz-placeholder {
       color: lighten(@gray-base, 65%);
       font-weight: 400;
    }

    input[type="text"]:-ms-input-placeholder {
       color: lighten(@gray-base, 65%);
       font-weight: 400;
    }


    i {
      margin-right: 2px;
    }
}


// Logo & Branding
.logo {
    background: transparent url("../images/firecares-logo.png") left center no-repeat;
    display: inline-block;
    text-decoration: none;
    min-width: 196px;
    min-height: 60px;

    h1 {
      text-indent: -9999px;
      font-size: 20px;
    }
}

// MediaSection
.ct-mediaSection-inner {
  padding: 1.5em;
  a.btn:hover {
    color: white;
    opacity: 0.5;
  }
}

.ct-panel--item {
    padding-bottom: 5px 0 0;
}

.onepager .ct-navbar--hoverEffectLine .navbar-nav .onepage > a,
.ct-navbar--hoverEffectLine .navbar-nav .onepage > a {
    margin: 0 5px 0 24px;
    padding: 25px 0 24px 0;
}

// Department List View
.featured-department-map {
  background-position: 50% 45%;
  height: 90px;
}

.featured-department-transparency {
  background-color: rgba(255, 255, 255, 0.65);
  height: 90px;

  &:hover {
  background-color: rgba(255, 255, 255, 0.2);
  }
}

.featured-department-map-label {
  top: 3px !important;
}

  // Department Detail View
  // ------------------------------------

  // Community Stats
.community-stats {
i {
font-size: 40px;
  margin-right: 15px;
}
h4, h5 {
margin-left: 55px;
}
h4 {
color: @brand-primary;
font-size: 35px;
margin-bottom: 5px;

span {
font-size: 18px;
}
}
}

  // Table - Resedential Structure Fire
table.residential-fires{
font-size: 14px;
}

  // Dynamic selected risk level label
  .selected-risk {
      color: #999;
      text-transform: capitalize;
  }
  .ct-heading {
    .selected-risk {
      font-size: 18px;
    }
  }
  .metric-cards-title {
    .selected-risk {
      font-size: 14px;
    }
  }

  // Risk Score Gauge
  // ------------------------------------

  // TODO: Find a proper home for this mixin
.tri-gradient(@start-color: #cd412c; @mid-color: #ffca5e; @color-stop: 50%; @end-color: #9fbe1c) {
background: @start-color;
background: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); /* FF3.6+ */
background: -ms-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}

.gauge {
  &.invalid {
    background: @gray-lightest;

    .dial {
      background: @gray-lightest !important;
    }

    .needle {
      border-bottom-color: @gray-lightest !important;
    }
  }
  .tri-gradient(@start-color: #F6542F; @mid-color: #FEBE00; @color-stop: 50%; @end-color: #74AC49);
  width:200px;
  height:100px;
  margin: 0 auto 30px;
  border-radius:250px 250px 0 0;
  border:1px solid silver;
  position:relative;
  border:1px solid white;
}

.gauge-inverse {
.tri-gradient(@start-color: #74AC49; @mid-color: #FEBE00; @color-stop: 50%; @end-color: #F6542F);
}

.guage-min {
font-size: @font-size-small - 2;
color: @gray-lighter;
position: absolute;
bottom: -4px;
left: -15px;
}

.guage-max {
font-size: @font-size-small - 2;
color: @gray-lighter;
position: absolute;
bottom: -4px;
right: -30px;
}

div.unauthenticated * div.gauge,
div.unauthenticated * div.gauge-inverse {
    background: -webkit-linear-gradient(left, #C8C8C8, #787878 50%, #505050);
}

.masked {
position:absolute;
width: 160px;
height: 79px;
border-radius: 210px 210px 0 0;
background:white;
left:50%;
border-bottom:none;
margin-left:-80px;
bottom: -1px;
}

.inset {
position:absolute;
width:86px;
height:86px;
left:50%;
bottom:-40px;
margin-left:-43px;
background: darken(@gray-lightest,5%);
border-radius:50%;
}

.dial {
width:70px;
height:70px;
position:absolute;
bottom:-32px;
left:50%;
margin-left:-35px;
background: #FA841A;
border-radius:50%;
box-sizing:border-box;
z-index:100;
}

.dial-inset {
position:relative;
top:20px;
display:block;
border-radius:50%;
bottom:20px;
z-index:3;
}

.dial-inset-value {
color: white;
display: block;
font-size: @font-size-large;
font-weight: 600;
text-align: center;
position: relative;
top: 50%;
}

.needle{
content:"";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 60px solid #FA841A;
position:absolute;
bottom:0;
left:50%;
margin-left:-20px;
transform:rotate(-87deg); // -87deg = 0
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
transition: transform .7s ease-in-out;
}

.gauge-description {
text-align: center;
margin-top: 55px;
h4 {
font-weight: 500;
}
p {
font-size: 13px;
line-height: 16px;
margin: 0 auto;
max-width: 90%;
opacity: 0.5;
padding-top: 5px;
}

a{
color: @brand-primary;
border-bottom: 1px dotted white;
  &:hover {
    border-bottom: 1px dotted;
  }
}

}

.bar-gauge {
  .tri-gradient(@start-color: #F6542F; @mid-color: #FEBE00; @color-stop: 50%; @end-color: #74AC49);
  height: 7px;
  width: 150px;
}

.high {
  background-color: #F6542F;
  padding-left: 10px;
  &:before{
    border-color: transparent saddlebrown transparent transparent;
  }
}

.medium {
  background-color: #FA8E15;
  padding-left: 10px;
  &:before{
    border-color: transparent sienna transparent transparent;
  }
}

.low {
  background-color: #74AC49;
  padding-left: 10px;
  &:before{
    border-color: transparent darkolivegreen transparent transparent;
  }
}

.unavailable {
  background-color: #DDDDDD;
  padding-left: 10px;
  &:before{
    border-color: transparent #AAAAAA transparent transparent;
  }
}

.bar-gauge-inverse {
  .gauge-inverse
}

.bar-gauge-label {
  font-size: 10px;
  color: #a6a6a6;
  position: absolute;
  cursor: default;
  padding-top: 5px;
}

.bar-gauge-label-min {
  left: 0px;
}

.bar-gauge-label-max {
  right: 0px;
}

.bar-gauge-wrapper {
  position: relative;
}

.bar-gauge-needle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
  position: absolute;
}

.number-gauge {
  height: 50px;
  position: relative;
}

.form-error {
  border-color: #bf5252;
}


.errorlist {
  color: #bf5252;

  li{
    list-style: none;
  }

  li:before {
    font-family: 'FontAwesome';
    content: '\f00d';
    margin:0 5px 0 -15px;
    color: #bf5252;
    }
}

.firecares-graph {
  // all chart text
  .nvd3 text {
    font: 300 14px "Open Sans";
    color: @text-color;
  }

  // chart axis lines
  .nvd3 .nv-axis path.domain {
    stroke-opacity: 1;
    stroke: @gray-lightest;
  }

  // chart legend text
  .nvd3 .nv-axis .nv-axisMaxMin text {
    font-size: 12px;
    color: @gray-lighter;
    font-weight: 500;
    fill: @gray-lighter;
  }
}

.metric-description {
  .gauge-description;
  margin-top: 5px;
}

.metric-value-location {
  fill: #F6542F;
}

.bullet-chart {
  & svg {height: 50px}

  & .bullet { font-size: 14px; fill: #a6a6a6}
  & .bullet .marker { stroke: #000; stroke-width: 2px; }
  & .bullet .tick line { stroke: #666; stroke-width: .5px; }
  & .bullet .range.s0 { fill: #eee; }
  & .bullet .range.s1 { fill: #ddd; }
  & .bullet .range.s2 { fill: #ccc; }
  & .bullet .range.s3 { fill: #bbb; }
  & .bullet .measure.s0 { fill: steelblue; }
  & .bullet .title { font-size: 14px; font-weight: bold; }
  & .bullet .subtitle { fill: #999; }
}

.metric-card {

  -webkit-box-shadow: none;
  box-shadow: none;
  display: inline-block;
  border-radius: 4px;
  width: 100%;
  position: relative;
  border-top: 1px solid #ddd;


  &:first-child {
    border-top: 0px;
  }

  .ct-product--tilte {
    line-height: 1;
  }

  .main-text {
    background-color: #F7F7F7;
    padding: 15px;
  }

  .description {
    font-size: 13px;
    font-family: "Open Sans", sans-serif;
    opacity: .6;
    padding-top: 4px;
  }
  .main-content {
    position: relative;
    border: none;
    border-radius: 2px;
  }

  a {
    color: @brand-primary;
    border-bottom: 1px dotted white;
    &:hover {
      border-bottom: 1px dotted;
    }
  }
}

.metric-cards-title {
  background-color: #F7F7F7;
  text-align: center;
  padding: 7px;
  font-weight: 600;
}

.ct-u-paddingLeft40 {
  padding-left: 30px;
}
.ct-u-paddingLeft20 {
  padding-left: 15px;
}

.diamond-control-label {
  position: relative;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  width: 50px;
  height: 50px;
  border: 2px solid pink;
  color: pink;
  z-index: 1000;
  margin: 0 auto;
}
.diamond-control-label div {
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  display: table-cell;
  width: 46px;
  height: 46px;
  vertical-align: middle;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0px 0px 0px #000000;
}
.diamond-high {
  border: 2px solid #F6542F;
  color: #F6542F;
}
.diamond-medium {
  border: 2px solid #FA8E15;
  color: #FA8E15;
}
.diamond-low {
  border: 2px solid #74AC49;
  color: #74AC49;
}
.diamond-unavailable {
  border: 2px solid #DDDDDD;
  color: #DDDDDD;
}

.diamond-legend {
  width: 10px;
  height: 10px;
  opacity: .5;
  display: inline-block
}

.risk-card {
  -webkit-box-shadow: none;
  box-shadow: none;
  display: inline-block;
  border-radius: 4px;
  width: 100%;
  position: relative;
  border-top: 1px solid #ddd;
}

@media (max-width: 991px) {
  .risk-card {
    margin-bottom: 50px;
  }
}

.risk-card:first-child {
  border-top: 0px;
}
.risk-card .main-text {
  padding: 15px;
}
.risk-card .description {
  font-size: 13px;
  font-family: "Open Sans", sans-serif;
  opacity: .6;
  padding-top: 4px;
}
.risk-card .main-content {
  position: relative;
  border: none;
  border-radius: 2px;
}

.community-risk-legend {
  padding-top: 10px;
  padding-left: 18px;
  line-height: 1.2;

  & .help-text {
    opacity: .6;
    font-size: 11px;
    padding-right: 15px;
  }

  & .help-text-category {
    font-weight: bold;
    padding-left: 3px;
  }

  &.text-center {
    .help-text {
      padding-right: 0;
    }
  }
}


.circle {
	border-radius: 50%;
}


.safe-grade-legend-icon {
  .circle;
  width: 10px;
  height: 10px;
  display: inline-block;
  opacity: .6;
  margin: 1px;
}

.safe-grade-legend {
  padding-top: 0;
  padding-left: 0;
  line-height: .94;
  & div {
    padding: 5px;
  }

  .help-text-category {
    padding-left: 1px;
  }
}

.nav > li > a:hover, .nav > li > a:focus {
    color: inherit;
    background-color: inherit;
    outline: none;
}

.home-search-input {
  display: inline-block;
  max-width: 370px;
}

.sub-navbar {
  border: none;
  background-color: #fafafa;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px;
  font-size: 15px;
  font-weight: bold;

  a {
    color: #2d3a51;
    opacity: .5;
    padding: 0 15px;
  }
  small {
    font-size: 62%;
    color: blue;
    position: absolute;
    font-weight: bold;
    margin-top: -2px;
  }
}

.sub-navbar {
  small {
    font-size: 70%;
    color: blue;
    position: absolute;
    font-weight: bold;
    margin-top: -6px;
  }
}

.ct-menuMobile-navbar {
  small{
    font-size: 61%;
    color: #495e82;
    position: absolute;
    font-weight: bold;
    margin-top: 0px;
    margin-left: 2px;
  }
  
  sup {
    color: @brand-primary;
  }
}

.home-header {
  padding: 40px;
}

@media (max-width: @screen-sm-max) {
  .home-computer-img {
    max-width: 100%;
  }
}

.header-gradient {
background: -moz-radial-gradient(center, ellipse cover, rgba(73,94,130,1) 0%, rgba(45,58,81,1) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(73,94,130,1)), color-stop(100%, rgba(45,58,81,1))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(73,94,130,1) 0%, rgba(45,58,81,1) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(73,94,130,1) 0%, rgba(45,58,81,1) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(73,94,130,1) 0%, rgba(45,58,81,1) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(73,94,130,1) 0%, rgba(45,58,81,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#495E82', endColorstr='#2d3a51',GradientType=1 ); /* ie6-9 */
}

.quick-transition {
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.marketing-icon {
  a:hover i {
    color: lighten(@brand-primary, 30%);
    .quick-transition;
  }

  i {
    font-size: 60px !important;
    color: @brand-primary;
    .quick-transition;
  }
}

.ct-iconBox--2col .ct-iconBox--description,
.ct-iconBox--2col .ct-icon {
  display: inline-block;
}

.ct-copyright-link {
  color: #757575;
  font-weight: 600;
}

.leaflet-control-layers-list {
  span {
    margin-left: .35em;
  }

  input[type='checkbox'] {
    width: auto;
  }
}

// Government unit linking
.usgs-messages {
  ul {
    margin-bottom: 0;
    padding-left: 0;
  }

  .alert {
    margin-bottom: 0;
    margin-top: 1em;
    height:40px;
    padding: 10px;
  }
}

.usgs-update-link {
  display: inline-block;
  margin-left: 2em;

  &.active {
    color: @brand-primary;
  }

  &:hover {
    i {
      color: @brand-primary;
    }
  }
}

form[name='boundaryUpload'] {
  a {
    border: 1px solid @brand-primary;
    width: 40%;
    display: block;
    float: left;
    text-align: center;
    margin: 1em 5%;

    &.commit {
      background-color: @brand-primary;
      color: @gray-lightest;

      &:hover {
        color: white;
      }
    }
  }
}

.in-front {
  z-index: 9999;
}

.usgs {
  .metric-card {
    background-color: #F7F7F7;
    margin-bottom: 1em;

    &:first-child {
      border-top: 1px solid #ddd;
    }
  }

  .main-text ul {
    padding-left: 10px;
  }

  hr {
    clear: both;
  }

  .map {
    min-height: 300px;
    padding-left: 0;
  }

  .map > .leaflet-control-container:after {
    content: '';
    position: absolute;
    -webkit-box-shadow: inset -1px 1px 5px 3px rgba(0, 0, 0, 0.19);
    -moz-box-shadow: inset -1px 1px 5px 3px rgba(0, 0, 0, 0.19);
    box-shadow: inset -1px 1px 5px 3px rgba(0, 0, 0, 0.19);
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 1000;
  }

  ul {
    padding-left: 30px;
  }

  input[type='checkbox'].hang-left {
    margin-left: -20px;
  }

  input[type='checkbox'] {
    width: 1em;
    float: left;
  }

  li {
    list-style-type: none;
  }

  button {
    clear: left;
  }

  .submission {
    input[type='checkbox'] {
      margin-right: 0.5em;
    }
  }
}

.apparatus {
  input[disabled] {
    color: #fff;
  }

  .tab-content .tab-pane {
    padding-top: 0;
  }

  .apparatus-help {
    margin: 1em 0;
  }

  .no-apparatus {
    margin: 2em;
  }
}

.contactForm {
  width: 100%;
}

.g-recaptcha {
  display: inline-block;
  margin-bottom: 22px;
}

/* Normalizing bootstrap versions between Estato theme and included bootstrap */
.navbar-toggle {
  margin-top: 8px;
  margin-bottom: 8px;
}

.dropdown-menu {
  font-size: 14px;
  z-index: 2000;
}

.wizard-modal-window {
  z-index: 9000 !important;
}


.account-request-section {
  background-color: #2d3a51;

  h2 {
    text-transform: uppercase;
    font-weight: 100;
  }

  .header-element {
    color: @brand-primary;
    margin-top: -30px;
  }

  .account-request-section-content {
    font-weight: 100;
    padding-top: 4px;
  }

  input {
    background-color: #2d3a51;
    border-color: white;
    border-width: 1px;
  }

  button {
    margin-top: 21px;
  }

}

.default-cursor {
  cursor: default !important;
}

.sign-up-button {
    border: 2px @brand-primary solid;
    border-radius: 5px;
    padding: 4px !important;
    background-color: @brand-primary;
    color: white !important;

    &:hover {
      background-color: white;
      color: #2d3a51 !important;
      opacity: .5;
      padding: 0 15px;
    }
}

.sign-up-popover-content {

  .popup-content {
    font-size: 14px;
    padding-bottom: 15px;
  }

  input {
    padding: 10px;
    width: 100% !important;
    background-color: white
  }

  button {
    margin-top: 15px
  }
}

.right-navbar {
  right: 45px;
  position: absolute;
  width: 300px;
}

.partners .owl-pagination {
  display: none;
}
.videos .owl-pagination {
  display: none;
}

.videos .owl-item .item {
  background-color: #f3f3f3;
  padding: 2rem;
}

.videos .owl-item .item a{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.videos .owl-item .item a:hover span i{
    transform: translateX(30%);
}
.videos .owl-item .item img {
  transition: transform .5s;
  transition: filter .5s;
  transition: -webkit-filter .5s;
  border-radius: 2px;
  height: 15rem;
  width: 20rem;
  margin: 1rem;
  padding: 0;
  -webkit-filter: brightness(70%); /* Safari 6.0 - 9.0 */
  filter: brightness(70%);
}
.videos .owl-item .item img:hover {
    -webkit-filter: none; /* Safari 6.0 - 9.0 */
    filter: none;
    cursor: pointer;
  }
.videos .owl-item .item span {
  display: flex;
  align-items: center;
  margin-bottom: 42px;
  margin-left: 15px;
  background: rgba(31, 41, 54, 0.9);
  padding: 1rem;
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.videos .owl-item .item h5 {
  font-weight: 500;
  flex: 0 0 76%;
  opacity: .85;
  transition: opacity ease-in-out .25s;
}
.videos .owl-item .item i {
  flex: 0 0 7%;
  background-color: rgba(255, 158, 33, 1);
  color: rgba(29, 39, 50, 1); 
  padding: .3rem .6rem;
  border-radius: 99rem;
  font-size: 105%;
  font-weight: 800;
  transition: all ease-in-out .25s;
  ::before {
    left: 1px;
    position: relative;
  }
}

/* Edit functionality on the firestation detail page */
.firestationDetail .ct-formSearch--extended {
    background-color:#fff;
}
.firestationDetail .form-control {
  border: 2px solid #fff;
  background-color: #eee;
}
.firestationDetail .select2-container .select2-choice .select2-arrow {
  border-left: 2px solid #ddd;
  color: #000;
}
.firestationDetail .slider.slider-horizontal .slider-handle {
  border: 4px solid #ddd;
}
.firestationDetail .slider.slider-horizontal .slider-track {
  background: #ddd;
}

.editable-buttons span {
    line-height: 1 !important;
    padding: 0px;
}

.editable-buttons button {
    padding: 1px 5px;
}

.editable-controls label {
    line-height: 50px;
    margin-right: 10px;
}

.editable-buttons .btn-primary {
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.editable-buttons .btn-primary:hover {
    background-color: darkolivegreen;
    border-color: darkolivegreen;
}

.editable-buttons .btn-default:hover {
    background-color: #cd412c;
    border-color: #cd412c;
}

.ct-u-displayTableCell .popover-wrapper form {
    top: -83px;
}

.underlined-link {
  color: @brand-primary;
  border-bottom: 1px dotted white;

  &:hover {
    color: @brand-primary;
    border-bottom: 1px dotted;
  }
}

.learn-more-link a {
  .underlined-link;
}

.learn-more-link-icon {
  a {
    color: @brand-primary;
    border-bottom: 0;

    i {
      padding: 0 !important;
    }
  }
}

/* Disclaimer */

.accept-terms {
  text-align: center;
  input {
    width: auto;
  }
}

/* Department user admin page */

.user-admin {
  .delete-perms {
    color: red;
  }

  td {
    min-width: 15em;
  }
}

.whitelist-admin {
  .delete-whitelist {
    color: red;
  }

  td {
    width: 20%;
  }

  span.label.label-danger {
    margin-right: 2em;
    margin-top: 12px;
  }
}

/* Registration tweaks */
.ct-formRegister {
  input[disabled] {
    background-color: @gray-dark;
  }

  *[type="submit"] {
    width: 100%;
  }

  button {
    width: 100%;
  }

  h4 {
    color: @gray-lightest;
  }

  p {
    color: @gray-light;
    font-size: 80%;
    line-height: 115%;
  }

  a {
    color: inherit;
  }

  .add-on {
    & .row div:first-child {
      border-right: 1px solid @gray;
    }

    a {
      width: 100%;
    }
  }

  .recovery {
    color: @gray-lighter;
    a {
      color: @brand-primary;
      &:hover {
        color: @brand-warning;
      }
    }
  }
}

.invitations {
  .form-inline .form-control {
    width: 100%;
  }

  .delete-invitation {
    color: red;
  }

  .panel-group {
    margin-bottom: 1em;
  }

  .alert {
    margin-bottom: 0;
    margin-top: -5px;
  }

  input {
    background-color: @body-bg;
  }
}

.loading-container {
  position: relative;

  .loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: @body-bg;
    z-index: 10000;
  }
}

.risk-filter {
  .ct-u-displayTableVertical {
    line-height: 50px;
    button {
      width: 100%;
      border-color: @gray-lightest;
    }
  }
}
.glyphicon-spin {
  -webkit-animation: spin 1000ms infinite linear;
  animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

input.no-dirty.ng-dirty, select.no-dirty.ng-dirty {
  background-color: inherit;
}

input.no-invalid.ng-invalid, input.no-invalid.ng-invalid:focus {
  color: inherit;
  border-color: inherit;
  -moz-box-shadow: inherit;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
}

.association-requests {
  input {
    background-color: white;
  }

  .panel-collapse {
    padding-bottom: 1em;
  }

  form {
    margin-left: 1.3em;
  }

  p.results {
    margin-left: 1.2em;
  }

  &.panel-group {
    .panel + .panel {
      margin-top: 2px;
    }
  }
}

.ct-productMeta--single a.is-your-department {
  width: 250px;
  display: block;
  margin: 0 auto;
  line-height: 15px;
  color: @brand-primary;
}

.inherit-background {
  background-color: inherit !important;
}

.department-user-approval {
  select {
    width: 25%;
  }
}

div.is-your-department {
  border-top: 1px solid #ddd;
  padding-top: 10px;
  margin-top: 15px;
}

.x.axis {
  font-size: 10px;
  opacity: 0.6;
}

.y.axis {
  font-size: 10px;
  opacity: 0.6;
  .domain {
    display: none;
  }
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

.d3-tip .tip-value {
  color: @brand-primary;
}

.form-popover {
  // Use default font-family from typography.less;
  font-family: @font-family-main;
  .popover-title {
    // Use the same style
    font-size: 14px;
    line-height: 24px;
    padding: 8px;
    display: block;
    text-transform: uppercase;
    text-align: center;
  }
  .popover-content {
    padding: 0;
    form {
      border-radius: 0 0 5px 5px;
      padding: 30px 20px 30px 20px;
      p {
        color: #fff;
        font-size: 15px;
        line-height: 21px;
      }
      textarea {
        resize: vertical;
      }
    }
  }
}

.score-disclaimer {
  color: @gray-light;
  border: 2px solid #c66;
  padding: 1em;
  box-shadow: 0 0 6px #f8b9b7;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
}

.faqs, .safe-grades, .performance-score, .community-risk {
  .safe-grades;

  .faq-list {
    margin-top: 1em;
    li {
      list-style-type: disc;
    }
  }

  h3, h4 {
    border-bottom: none;
    color: @text-color;

    i {
      visibility: hidden;
      font-size: 17px;
    }

    &:hover {
      border-bottom: none;
      color: @text-color;

      i {
        visibility: visible;
        cursor: pointer;
        color: @text-color;
        border-bottom: none;
      }
    }

    & a {
      color: @text-color;
      cursor: text;
      text-decoration: none;
      border-bottom: none;

      &:hover {
        text-decoration: none;
        border-bottom: none;
      }
    }
  }

  h4 i {
    font-size: 14px;
  }
}

.media {
  a.read-more {
    .underlined-link;
  }
  
  h3 {
    i {
      visibility: hidden;
      font-size: 70%;
    }
    &:hover i {
      visibility: visible;
    }
  }
}

.safe-grades {
  a {
    .underlined-link;
  }

  hr {
    margin-top: 10px;
  }
}

.fire-station h2 {
  line-height: 30px;
}

//
// Alerts
// --------------------------------------------------


// --------- Variables ---------
@alert-help: #ffab00;
@alert-warning: #ff5400;
@alert-info: #3592ff;
@alert-error: #d33534;
@alert-success: #42ae42;

//  --------- Alert Adjustments ---------
.alert {
  position: relative;
  padding: 0;
  min-height:33px;
  padding-top: 4px;
  padding-left: 11px;
  min-width: 250px;
}

.alert button.close {
  margin: -0.25rem 1rem;
  opacity: 0.75;
  padding-bottom: 20px;

  &:hover {
    opacity: 1;
  }
}

.alert-icon,
.alert-text {
  display: table-cell;
  vertical-align: middle;
}

.alert-icon {
  min-width: 40px;
  text-align: center;
  font-size: 2.2rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 1rem;
}

.alert-text {
  //color: #2d3a51;  This should be whatever the defualt body copy color is for FIRECARES
  padding-left: 2em;
  padding-bottom: 1.1em;
  width: 100%;
}

.alert-text > h5 {
  margin-top: 0;
  font-weight: 600;
}

.alert .alert-link {
  font-weight: normal;
  color: #4790e6;
  font-size:14px;
  margin-left:-16px;
  line-height:35px;
}

.alert ul {
  margin: 0;
  li {
    margin-top: -12px;
    margin-bottom: 0.2rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

#video-panel {
  h5 {
    text-align: left;
    font-size: 14px;
  }
}

//  --------- Alert Types ---------

// Warning
.alert-warning {
  background-color: lighten(@alert-warning, 48%);
  border-color: lighten(@alert-warning, 35%);
  margin-top:1.7em;

  .alert-text h5 {
    color: @alert-warning;
  }

  button.close {
    color: @alert-warning;
  }

  .alert-icon {
    background-color: @alert-warning;
  }
}

// Help
.alert-help {
  background-color: lighten(@alert-help, 48%);
  border-color: lighten(@alert-help, 34%);

  .alert-text h5 {
    color: @alert-help;
  }

  button.close {
    color: @alert-help;
  }

  .alert-icon {
    background-color: @alert-help;
  }
}

// Info
.alert-info {
  background-color: lighten(@alert-info, 38%);
  border-color: lighten(@alert-info, 30%);

  .alert-text h5 {
    color: @alert-info;
  }

  button.close {
    color: @alert-info;
  }

  .alert-icon {
    background-color: @alert-info;
  }
}

// Error
.alert-danger {
  background-color: lighten(@alert-error, 46%);
  border-color: lighten(@alert-error, 38%);

  .alert-text h5 {
    color: @alert-error;
  }

  button.close {
    color: @alert-error;
  }

  .alert-icon {
    background-color: @alert-error;
  }
}

// Success
.alert-success {
  background-color: lighten(@alert-success, 48%);
  border-color: lighten(@alert-success, 34%);

  .alert-text h5 {
    color: @alert-success;
  }

  button.close {
    color: @alert-success;
  }

  .alert-icon {
    background-color: @alert-success;
  }
}

.toolTip2 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    background: none repeat scroll 0 0 white;
    border: 0 none;
    border-radius: 8px 8px 8px 8px;
    box-shadow: -3px 3px 15px #888888;
    color: black;
    font: 12px sans-serif;
    padding: 5px;
    text-align: center;
}
